<!--
  * @Description: 职位收藏
  * @Author: rcc
  * @Date: 2024-08-07 10:49:49
  * @FilePath: /rc-recruitment/pages/office/collect/collect.vue
-->

<template>
  <view class="p-h24">
    <view class="p-t40 text-700-130">共 {{ list.length }} 条</view>

    <view class="office">
      <template v-if="list.length > 0">
        <view v-for="item in list" :key="item.id" class="card flex" @click="toDetail(item.id)">
          <image class="cover" :src="item.company.images" mode="aspectFill" />

          <view class="flex-1 flex-d-sb h">
            <view class="flex">
              <text class="flex-1 p-h20 text-700-130">{{ item.title }}</text>
              <text class="text-700-530">{{ item.money_range }}</text>
            </view>

            <view class="flex p-h20">
              <text v-for="(tag, index) in item.fringe.split(',')" :key="index" class="tag m-r10 text-500-324">{{ tag
              }}</text>
            </view>

            <view class="flex">
              <text class="flex-1 p-h20 text-500-326">{{ item.company.title }}</text>
              <text class="text-500-326">{{ timeFormat(item.createtime * 1000) }} 发布</text>
            </view>
          </view>
        </view>
      </template>
      <view v-else class="p-v64">
        <up-empty />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import type { Office } from '@/types/api.d.ts'
import { timeFormat } from '@/utils/utils'

const list = ref<Office[]>([])

const toDetail = (id: number) => {
  uni.navigateTo({ url: `/pages/office/home/home?id=${id}` })
}

const getList = () => {
  uni.showLoading({ mask: false })
  uni.$u.get<Office[]>('/position/sclst').then((res) => {
    if (res.code === 1) {
      list.value = res.data.data
    }
  }).finally(() => {
    uni.hideLoading()
  })
}

onShow(() => {
  getList()
})
</script>

<style lang="scss" scoped>
page {
  background-color: $page-color-4;
}

.office {
  margin-top: 20rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;
}

.card {
  height: 210rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #EEEEEE;

  &:last-child {
    border: none;
  }

  .cover {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
  }

  .tag {
    height: 44rpx;
    padding: 0 10rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 44rpx;
    background-color: #F3F3F3;
  }
}
</style>
